/* 具体各类型节点 默认样式 */
.flow-node.flow-event {
  width: var(--event-width-2);
  height: var(--event-width-2);
  border-radius: 50%;
  color: var(--color-text-2);
  font-size: var(--text-size-1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  user-select: none;
  border-width: 2px;
  border-color: var(--color-danger-light-4);
  border-style: dashed;
  &.start-event,
  &.end-event {
    width: var(--event-width);
    height: var(--event-width);
  }
}
.flow-node.flow-task {
  width: var(--task-width);
  height: var(--task-height);
  pointer-events: auto;
  .flow-node_header {
    color: #ffffff;
    background-color: var(--color-primary-light-4);
  }
}
.flow-node.flow-service {
  width: var(--service-width);
  height: var(--service-height);
  pointer-events: auto;
  .flow-node_header {
    color: #ffffff;
    background-color: var(--color-success-light-4);
  }
}
.flow-node.flow-expression {
  width: var(--expression-width);
  height: var(--expression-height);
  pointer-events: auto;
  .flow-node_header {
    color: #ffffff;
    background-color: var(--color-warning-light-4);
  }
}
.flow-node.flow-subprocess {
  border-width: 2px;
  border-color: rgba(var(--color-line-rgb), 0.4);
  > .flow-node_header {
    background-color: var(--color-bg-1);
    pointer-events: auto;
  }
  > .ding-flow_wrapper {
    border-radius: var(--border-radius-medium);
  }
}
.flow-node.flow-gateway {
  border: unset;
  position: relative;
  pointer-events: none;
  background: none;
  box-shadow: none;
  .ding-flow_wrapper {
    border-radius: var(--border-radius-medium);
  }
  .gateway-node__behavior {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 100;
    pointer-events: auto;
  }
  .gateway-node__branches {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }
  .branch-col {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    flex-grow: 0;
  }
  .branch-col > .branch-col_content > .ding-flow_wrapper > .ding-flow_container > .flow-node__wrapper {
    &:last-child > .flow-node__behavior::after {
      content: unset;
    }
  }
}

.ding-flow_horizontal {
  .flow-subprocess {
    //min-height: var(--common-width);
    & > .ding-flow_wrapper {
      padding: var(--common-padding-2) var(--common-padding-3);
    }
  }

  .flow-gateway {
    padding-left: var(--common-padding-5);
    .gateway-node__behavior {
      height: 100%;
      width: calc(var(--common-padding-5) * 2);
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      justify-content: start;
    }
    .gateway-node__branches {
      //flex-direction: column;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .gateway-node__branches > .branch-col {
      display: flex;
      flex-direction: row;
      align-items: center;
      &:first-child {
        > .branch-col_prefix {
          height: calc(50% + 1px);
          align-self: flex-end;
          border-top: 2px solid var(--color-line);
          border-bottom: none;
          &::before {
            content: unset;
          }
        }
        > .branch-col_suffix {
          height: calc(50% + 1px);
          align-self: flex-end;
          border-top: 2px solid var(--color-line);
          border-bottom: none;
          &::before {
            content: unset;
          }
        }
      }
      &:last-child {
        > .branch-col_prefix {
          height: calc(50% + 1px);
          align-self: flex-start;
          border-top: none;
          border-bottom: 2px solid var(--color-line);
          &::before {
            content: unset;
          }
        }
        > .branch-col_suffix {
          height: calc(50% + 1px);
          align-self: flex-start;
          border-top: none;
          border-bottom: 2px solid var(--color-line);
          &::before {
            content: unset;
          }
        }
      }

      & > .branch-col_content {
        padding: var(--common-padding-3) 0 ;
        box-sizing: border-box;
      }
      & > .branch-col_prefix {
        height: 100%;
        width: var(--common-padding-5);
        flex-shrink: 0;
        flex-grow: 0;
        border-left: 2px solid var(--color-line);
        box-sizing: border-box;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          border-top: 2px solid var(--color-line);
        }
      }
      & > .branch-col_suffix {
        width: 100%;
        height: 100%;
        flex: 1;
        border-right: 2px solid var(--color-line);
        box-sizing: border-box;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: calc(50% - 1px);
          height: 2px;
          background-color: var(--color-line);
        }
      }

      .ding-flow_container {
        padding: 0;
        overflow: visible;
      }
    }
  }

  .df-button.df-button-mini {
    line-height: 1;
    padding: 12px 4px;
  }
}
.ding-flow_vertical {
  .flow-subprocess {
    min-width: var(--common-width);
    & > .ding-flow_wrapper {
      padding: var(--common-padding-3);
    }
  }

  .flow-gateway {
    padding-top: var(--common-padding-3);
    .gateway-node__behavior {
      width: 100%;
      height: calc(var(--common-padding-3) * 2);
      left: 50%;
      top: 0;
      transform: translate(-50%, 0);
    }
    .gateway-node__branches {
      flex-direction: row;
    }
    .gateway-node__branches > .branch-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      &:first-child {
        > .branch-col_prefix {
          width: calc(50% + 1px);
          align-self: flex-end;
          border-left: 2px solid var(--color-line);
          border-right: none;
          &::before {
            content: unset;
          }
        }
        > .branch-col_suffix {
          width: calc(50% + 1px);
          align-self: flex-end;
          border-left: 2px solid var(--color-line);
          border-right: none;
          &::before {
            content: unset;
          }
        }
      }
      &:last-child {
        > .branch-col_prefix {
          width: calc(50% + 1px);
          align-self: flex-start;
          border-left: none;
          border-right: 2px solid var(--color-line);
          &::before {
            content: unset;
          }
        }
        > .branch-col_suffix {
          width: calc(50% + 1px);
          align-self: flex-start;
          border-right: 2px solid var(--color-line);
          border-left: none;
          &::before {
            content: unset;
          }
        }
      }

      & > .branch-col_content {
        padding: 0 var(--common-padding-3);
        box-sizing: border-box;
      }
      & > .branch-col_prefix {
        width: 100%;
        height: var(--common-padding-5);
        flex-shrink: 0;
        border-top: 2px solid var(--color-line);
        box-sizing: border-box;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: calc(50% - 1px);
          width: 2px;
          background-color: var(--color-line);
        }
      }
      & > .branch-col_suffix {
        width: 100%;
        height: 100%;
        flex: 1;
        border-bottom: 2px solid var(--color-line);
        box-sizing: border-box;
        position: relative;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: calc(50% - 1px);
          width: 2px;
          background-color: var(--color-line);
        }
      }

      .ding-flow_container {
        padding: 0;
        overflow: visible;
      }
    }
  }
}

/* 具体各类型节点 自定义样式 */
.flow-node.flow-event {
  &.start-event {
    border-style: solid;
    border-width: 2px;
    border-color: var(--color-success-light-4);
  }
  &.end-event {
    border-style: solid;
    border-width: 4px;
    border-color: var(--color-danger-light-4);
  }
}
